<template>
    <view class="info">
        <view class="cell">
            <view class="s1">头像</view>
            <view class="s2">
                <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
                    <image :src="avatarUrl"></image>
                </button>
            </view>
            <view class="s3">
                <u-icon name='arrow-down'></u-icon>
            </view>
        </view>
        
        <view class="cell">
            <view class="s1">昵称</view>
            <view class="s2">
                <input type="nickname" class="weui-input" :value="res.nickname" @blur="bindblur" placeholder="请输入昵称" @input="bindinput" />
            </view>
            <view class="s3">
                <u-icon name='arrow-down'></u-icon>
            </view>
        </view>
        
        <view class="cell">
            <view class="s1">性别</view>
            <view class="s2" @click="gender_show = true">
                <text class="weui-input">{{ res.gender_text }}</text>
            </view>
            <view class="s3">
                <u-icon name='arrow-down'></u-icon>
            </view>
        </view>
        
        <view class="cell">
            <view class="s1">电话</view>
            <view class="s2" style="width:calc(100% - 104rpx)">
                <text class="weui-input">{{ user_local_phone }}</text>
                <view>
                    <u-button class="custom_btn" text='下一步' type='success' shape='circle' color='#30D6C2'
                    	:customStyle='{width: "264rpx"}' open-type="getPhoneNumber"
                    	@getphonenumber='getPhoneNumber()'>绑定手机号</u-button>
                </view>
            </view>
        </view>
        
        <view class="cell" @click="birthday_show = true">
            <view class="s1">生日</view>
            <view class="s2">
                <text class="weui-input">{{ res.birthday }}</text>
            </view>
            <view class="s3">
                <u-icon name='arrow-down'></u-icon>
            </view>
        </view>
        
        <view class="submit">
            <u-button type="success" text="保存" shape='circle' color='#30D6C2' @click="onSubmit()"></u-button>
        </view>
        
        <u-picker :show="gender_show" :columns="gender_list"
             @confirm="genderConfirm"
             @close='onClose'
             @cancel="onClose"
        ></u-picker>
        
        <u-datetime-picker
            ref="datetimePicker"
            :show="birthday_show"
            v-model="birthday"
            mode="date"
            :min-date='minDate'
            :formatter="formatter"
            @confirm="birthdayConfirm"
            @close='onClose'
            @cancel="onClose"
        ></u-datetime-picker>
    </view>
</template>

<script>
    import conf from '@/common/config.js';
    export default {
        data() {
            return {
                info: {},
                avatarUrl: '',
                res: {},
                user_local_phone: '',
                gender_show: false,
                gender_list: [
                    ['未知','男','女']
                ],
                birthday_show: false,
                birthday: Number(new Date()),
                minDate: new Date(1950, 1, 1).getTime(),
            }
        },
        onShow() {
            if (this.vuex_token) {
                let that = this
                that.$API.getUserInfo().then(res => {
                    that.$u.vuex('vuex_user', res.data.userinfo);
                    that.avatarUrl = res.data.userinfo.avatar
                    that.info = res.data.userinfo
                    that.user_local_phone = res.data.userinfo.mobile
                    that.res = {
                        my_logo: res.data.userinfo.avatar,
                        nickname: res.data.userinfo.nickname,
                        gender: res.data.userinfo.gender,
                        gender_text: res.data.userinfo.gender_text,
                        birthday: res.data.userinfo.birthday,
                        
                    }
                    
                })
            } else {
                uni.showModal({
                    title: '警告',
                    content: '请先登录，才能进行下面操作！',
                    showCancel:false,
                    success: function (res) {
                        uni.navigateBack()
                    }
                })
            }
        },
        onReady() {
            // 微信小程序需要用此写法
            this.$refs.datetimePicker.setFormatter(this.formatter)
        },
        methods: {
            
            bindblur(e) {
                // 获取微信昵称
                console.log('nickName', e)
                this.nickName = e.detail.value;
                this.res.nickname = e.detail.value;
            },
            bindinput(e) {
                console.log('nickName', e)
                this.nickName = e.detail.value;
                this.res.nickname = e.detail.value;
            },
            onChooseavatar(e) {
                this.avatarUrl = e.detail.avatarUrl;
            },
            getPhoneNumber(e) {
            	this.$API.getPhoneNumber({
            		code: e.detail.code
            	}).then(res => {
                    this.user_local_phone = res.data.phone
                    this.res.mobile = res.data.phone
            	})
            },
            onSubmit() {
                let that = this
                if (this.nickName === '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请输入昵称'
                    })
                    return false;
                }
                if (this.avatarUrl != this.res.my_logo) {
                    uni.showLoading({
                        title: '头像上传中...'
                    });
                    
                    let url = conf.url_config + '/api/common/upload';
                    uni.uploadFile({
                        url: url,
                        filePath: this.avatarUrl,
                        name: 'file',
                        formData: {},
                        header: {
                            Token: uni.getStorageSync('token')
                        },
                        success: (uploadFileRes) => {
                            let data = JSON.parse(uploadFileRes.data);
                            that.avatarUrl = data.data.fullurl
                            that.res.my_logo = data.data.url;
                            that.setProfile(2);
                        }
                    });
                } else {
                    that.setProfile(1);
                }
            },
            genderConfirm(e) {
                this.res.gender = e.indexs[0]
                this.res.gender_text = e.value[0]
                this.gender_show = false;
            },
            setProfile(ava = 1) {
                let that = this
                let params = {
                    nickname: this.res.nickname,
                    gender: this.res.gender,
                    birthday: this.res.birthday,
                };
                if (that.res.mobile) {
                    params.mobile = that.res.mobile
                }
                if (ava == 2) {
                    params.avatar = this.res.my_logo
                }
                this.$API.profile(params).then(res => {
                    that.$u.vuex('vuex_user', res.data.userinfo);
                    uni.showToast({
                        title: '保存成功',
                        icon: 'success',
                        success: function () {
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500)
                        }
                    })
                    
                }).catch(err => {
                    console.log('err', err)
                })
            },
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
            birthdayConfirm(e) {
                let timestamp = e.value;
                let dateObj = new Date(timestamp);
                let year = dateObj.getFullYear();
                let month = dateObj.getMonth() + 1;
                if (month < 10) {
                    month = '0' + month
                }
                let day = dateObj.getDate();
                if (day < 10) {
                    day = '0' + day
                }
                this.res.birthday = `${year}-${month}-${day}`
                this.birthday_show = false
            },
            onClose() {
                this.gender_show = false
                this.birthday_show = false
            },
            bingPhone(){
                console.log('绑定手机号事件');
            }
        }
    }
</script>

<style>
    page { background-color: #FFFFFF;}
</style>
<style lang="scss" scoped>
.info {
    width: 704rpx;
    margin: 0 auto;
    .cell {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 38rpx 0;
        border-bottom: 2rpx solid #F3F4F6;
				box-sizing: border-box;
        .s1 {
            width: 104rpx;
            font-size: 28rpx;
            line-height: 50rpx;
            color: #909399;
            text-align: center;
        }
        .s2 {
            width: 532rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
            button {
                width: 100%;
                height: 122rpx;
                padding: 0;
                margin: 0;
                border-radius: 0;
								background:none;
								display: flex;
								justify-content: flex-start;
                image {
                    width: 118rpx;
                    height: 118rpx;
                    border-radius: 100%;
										border:2rpx solid rgba(0,0,0,.08);
                }
								&::after{
									border-color: rgba(0,0,0,0);
								}
            }
						
						/deep/ .u-button{
							width: 212rpx;
							height: 58rpx;
							background: #30D6C2;
							border-radius: 8rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #F3F4F6;
						}
						.weui-input{
							font-size: 28rpx;
							font-weight: 400;
							color: #303133;
							line-height: 50rpx;
							width: 100%;
						}
        }
        .s3 {
            width: 48rpx;
            height: 48rpx;
        }
    }
}
.submit {
    position: fixed;
    width: 600rpx;
    height: 88rpx;
    bottom: 76rpx;
    left: 76rpx;
}

</style>
